<template>
  <div>
    <base-subheading>留言</base-subheading>
    <v-row>
      <v-col md='10'>
        <v-form @submit.prevent="send">
          <v-text-field
            label="发条留言..."
            required
            append-icon="mdi-send"
            v-model="content"
            @click:append="send"
          ></v-text-field>
        </v-form>
      </v-col>
    </v-row>
    <v-row class="pa-1">
      <v-col md="11">
        <v-list two-line subheader>
        <v-list-item v-for="(item, i) in says" :key="i">
          <v-list-item-avatar color="blue">
            <span class="white--text">{{item.user.username[0].toUpperCase()}}</span>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title v-text="item.leave"></v-list-item-title>
            <v-list-item-subtitle>
              <span>{{ item.user.username }}</span>
              <span>{{ item.createdAt | transfulltime }}</span>
            </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
      </v-col>
    </v-row>
  </div>
</template>

<script>
  export default {
    name: 'Instagram',

    data: () => ({
      says: [],
      content: null
    }),
    created(){
      this.fetch()
    },
    methods: {
    async send() {
      if(this.$axios.defaults.headers.common.Authorization){
        if(this.content){
          await this.$axios.$post('says/user', {
            leave: this.content,
            type: false
          })
          this.content = null
          await this.fetch()
        }else{
          this.$toast.show('请输入内容')
        }
      }else{
        this.$toast.error('请先登录')
      }
    },
    async fetch() {
      const {data: res }= await this.$axios.$get('says', {
        params: {
          query: {"where":{"type": false}, "populate":"user"}
        }
      })
      this.says = res.slice(-3)
    },
  },
  }
</script>
